<script setup>
import { formatTime } from '../../utils/time'
import { getCurrentInstance, ref, defineEmits  } from 'vue'
import request from '../../api/index.js'
const props = defineProps(['isComment', 'dataInfo', 'index', 'isLastItem'])
const proxy = getCurrentInstance()?.proxy
const emit = defineEmits(['getNewInfo']);
const url = ref({
  delComment: '/admin/comment/deleteComment',
  delMessage: '/admin/message/deleteMessage',
})
const deleteComment = (id) => {
  request.delete(`${ props.isComment ? url.value.delComment : url.value.delMessage}/${id}`).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type: 'success', duration: 1000,  message: res.data.message })
      emit('getNewInfo')
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}
</script>

<template>
  <yk-space class="comment-item">
    <yk-badge is-dot v-if="dataInfo.is_read === 0">
      <img src="../../assets/3.jpg" alt="" style="width:40px;height:40px;border-radius:50%">
    </yk-badge>
    <img v-else src="../../assets/3.jpg" alt="" style="width:40px;height:40px;border-radius:50%">
    <yk-space :size="0"  class="comment-item-content">
      <yk-space dir="vertical" :size="8" style="border-bottom:1px solid rgba(0, 0, 0, 0.08); padding-bottom:8px;width:92%">
        <div class="name">{{ dataInfo.user_name  }}</div>
        <div class="time">{{ formatTime(dataInfo.create_time) }}</div>
        <div class="content">{{ dataInfo.content }}adsssssssssssssafsafssssssssssssjnvgoanvanvasfafasdadsaaoaoasdaoaoaoaoaoaoaoaoaoaoaonaipsvnaoifn</div>
        <div class="desc" v-if="isComment">1111</div>
      </yk-space>
      <yk-popconfirm
        title="确认删除吗"
        content="删除后将无法恢复！！！"
        @confirm="deleteComment(dataInfo.ID)"
        placement="leftTop"
      >
        <div class="icon"><IconDeleteOutline /></div>
      </yk-popconfirm>
      
    </yk-space>
  </yk-space>
</template>

<style scoped lang='less'>
.comment-item {
  width:100%;
  padding-top:10px;

  .comment-item-content {
    width: calc(100% - 50px);

     .content {
      width:100%;
      overflow: hidden; 
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    :deep(.yk-popconfirm) {
      .yk-tooltip__content {

      }
    }

    &:hover {
      .icon {
        opacity: 1;
      }
    }

    .icon {
      color:@gray-6;
      opacity: 0;

      &:hover {
        color: @pcolor-dark;
      }
    }
  }
}

</style>
